<template>
	<view>
		<view class="lab">
			<view class="box">
				<view class="">
					<text>头像</text>
				</view>
				<view class="user-logo">
					<image class="Img" @tap='chooseImage()' :src="userInfo.image" mode=""></image>
					<image class="iconImg" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>

				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="lab">
			<view class="box">
				<view class="">
					<text>姓名</text>
				</view>
				<view class="d-jc-sb">
					<input maxlength="6" class="input-name" type="text" v-model="userInfo.nickName" />
					<image class="iconImg" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="lab">
			<view class="box">
				<view class="">
					<text>性别</text>
				</view>
				<view class="d-jc-sb">
					<radio-group class="d-jc-sb" @change="radioChange">
						<label class="d-jc-sb" v-for="(item, index) in items" :key="item.value">
							<view class="">
								<radio color="#FF8308" :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
					<image class="iconImg" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="">
			<button class="btn" @tap='save()'>保存信息</button>
		</view>
		<view class="">
			<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200"
				:height="200"></kps-image-cutter>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		computed: mapState(['userInfo','loginState']),
		components: {
			kpsImageCutter
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女',
						checked: 'true'
					},

				],
				current: 3,
				userInfo:{
					// interest:{

					// },
					// hobbyName:{

					// },
					// hobby:[]
				},
				hobbyList:'',
				hobby:{
					type:''
				},
				checkActive: '',
				checkActive2: '',
				path:'',
				url:''



			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			let carData = ''
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) {
					this.getUserInfo()

				}
			})
		},
		methods: {
			//完善信息页面
			changeInfo(){
				console.log(this.userInfo)
				if(this.userInfo.isAuth===0){
					uni.navigateTo({
					url:'./changeInfo'
				})
				}else if(this.userInfo.isAuth===1){
					uni.showToast({
						title: '已完成实名认证',
						duration: 1000,
						icon: 'none'
					})
				}

			},
			onok(ev) {
				let _this = this
				this.path = ev.path;
				this.url = "";
				console.log(JSON.stringify(this.path))
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: this.path,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success: function(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data.dataMap)
						_this.userInfo.image = data.dataMap
						console.log("------" + _this.image)
					}
				});
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
				console.log("====oncancle=====")

			},
			chooseImage() {
			    uni.chooseImage({
			        success: (res) => {
			            // 设置url的值，显示控件
			            this.url = res.tempFilePaths[0];
						
			        }
			    });
			},
			save(){
				this.$api_http.updateUserInfo(this.userInfo).then((res) => {
					if(res.data.code==200){
						uni.showToast({
							title: '保存成功',
							duration: 1000,
							icon: 'none'
						})
						setTimeout(function() {
							// uni.switchTab({
							// 	url:'user'
							// })
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				})
			},
			// 缓存获取用户信息
			getUserInfo() {
				// this.userInfo = uni.getStorageSync('userInfo') ==null? '':uni.getStorageSync('userInfo')
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					if (userInfo != null) {
						this.userInfo = userInfo
						this.current = Number(this.userInfo.sex)-1
					}

				})

			},
			check(id, value, type) {
				debugger
				if(type==2){
					let xingqu = JSON.parse(this.userInfo.hobby)[0]
				}else{
					let aihao = JSON.parse(this.userInfo.hobby)[1]
				}
				if (this.checkActive == id || this.checkActive2 == id) {
					this.$refs.popup.close()
				}
				if (type == 1) {
					this.userInfo.interest.value = value
					xingqu = id
					this.checkActive = id
				}
				if (type == 2) {
					this.userInfo.hobbyName.value = value
					this.checkActive2 = id
					aihao = id
				}
				let arr = [xingqu,aihao]
				console.log(JSON.stringify(arr))
				// arr.push(xingqu,aihao)
				// console.log(JSON.stringify(arr))
				this.userInfo.hobby = JSON.stringify(arr)
				// this.userInfo.hobby.push(aihao)
			},
			openMask(type) {
				this.$refs.popup.open()
				this.hobby.type = type
				this.$api.loadRegisterUser(this.hobby).then((res) => {
					this.hobbyList = res.data.data

				})

			},

			radioChange: function(evt) {
				this.userInfo.sex = evt.detail.value
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}


			}

		}
	}
</script>

<style scoped lang="less">
	.iconImg {
		width: 15rpx;
		height: 15rpx;
		margin-left: 15rpx;
	}
	.box{
		width: 690rpx;
		height: 100rpx;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	.d-jc-sb{
		display: flex;
		align-items: center;
	}
	.d-ai-c{
		align-items: center;
	}
	.input-name{
		width: 200rpx;
		text-align: end;
	}
	.btn{
		background-color: #FF8308 ;
		width: 600rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		margin-top: 50rpx;
	}
	.popup-card {
		width: 700rpx;
		background-color: #dfdfdf;
		height: 800rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 0 auto;

	}
	.text-heide-1{
		width: 400rpx;
		text-align: end;
	}
	.user-logo{
		display: flex;
		align-items: center;
	}
	.user-logo .Img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
	}

	.iconqianjin {
		color: #999999;
		padding-left: 20rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
	}
	.auth{
		width: 648rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
